<template>
  <div class="heatmap">
    <h2>热力图</h2>
    <div class="echardiv">
      <div class="repData" id="heatmapid"  v-loading="loadingimg"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          >
        <img :src="img" v-show="img.length" alt="图片">
        <div class="zwtp" v-if="!img.length">
            <h3>暂无图片</h3>
        </div>
        <div class="zwsj" v-if="img.length&&!dian.data.length">
          <h3>暂无数据</h3>
        </div>
        <div class="point heatdian"  v-for="(item,index) in dian.data" :key="index" 
         :style="'top:'+item.y+'px;left:'+item.x+'px;'+'width:'+dian.radius+'px;height:'+dian.radius+'px;'+(item.ismax?'z-index:20':'') "
        >
            <p>
              <span>区域：{{item.areaName}}</span>
              <span>热力系数：<span :style="item.ismax?'color:#ff0000':''">{{item.value}}</span></span>                    
            </p>
          </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
  .heatmap {
    width: 100%;
    background: #fff;
    padding: 35px 10px 20px 35px;
    overflow: hidden;
    > h2 {
      line-height: 1;
      font-weight: 600;
      font-size: 20px;
      letter-spacing: 1px;
      display: inline-block;
      margin-right: 20px;
    }
    .echardiv {
      .repData {
        margin: 20px auto 0;
        border: 3px solid #f5f5f5;
        width: 1006px;
        height: 569px;
        position: relative;
        .zwtp{
          position: absolute;
          width: 100%;
          height: 100%;
          top:0;
          left:0;
          background: rgba(245, 248, 254, 0.9);
          z-index: 998;
          h3{
            position: absolute;
            color:#4e4e4e;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            letter-spacing: 3px;
            padding-left: 3px;
          }            
        }
        .zwsj{
          position: absolute;
          width: 100%;
          height: 100%;
          top:0;
          left:0;
          background: rgba(245, 248, 254, 0.9);
          z-index: 998;
          h3{
            position: absolute;
            color: #414141;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            letter-spacing: 3px;
            padding-left: 3px;
          }
        }
        img {
          width: 100%;
          height: 100%;
          display: block;
          margin:  auto;
        }
        .point{
          position: absolute;
          border-radius: 50%;
          display: block;
          cursor: pointer;
          background: rgba(0,0,0,0);
          transform: translate(-50%,-50%);
          z-index: 10;
          p{
              position: absolute;
              left: 90%;
              top: 50%;
              display: none;
              width: 200px;
              background: rgba(0,0,0,0.8);
              padding:10px 0 10px  20px;
              border-radius: 6px;
              color:#fff;
              >span{
                display: block;
                line-height: 24px;  
              }
          }
           &:hover{
             p{
               display: block;
             }
           }
        }
      }
    }
  }
</style>
<script>
import Heatmap from "heatmap.js";
let heatmap = null;
export default {
  props:{
    parmas:{
      type: Object,
      default: function(){
        return {}
      }
    },  //条件
  },
  data() {
    return {
        img:'',
        dian:{              //鼠标hover显示数据  热力图点位
          data:[],
          radius:'35',
        },
        loadingimg:false,
    };
  },
  mounted() {
   
  },
  methods: {
    
    //条件改变
    upData(isNew=false,data){
      let parmas=isNew?data:this.parmas;
      // this.$Bus.$emit('Loading',true);
      let url='/sys/report/find-thermal-map-data?caseInfoId='+parmas.case_id+'&floor_tag_id='+parmas.floor_id+
        '&start_day='+parmas.start_day+'&end_day='+parmas.end_day+'&start_hm='+parmas.start_hm+'&end_hm='+parmas.end_hm;
      this.$api.get(url)
      .then(data=>{
        if(data){
          let _data=data.data[0];
          if(_data){
            this.getVer(_data.id,_data.map_version) //对比版本 判断本地是否存在图片
            let obj={
              data:[],
              radius:_data.radiation_radius,
              top_peak:_data.top_peak
            }
            let kpi=_data.indicator;
            for(let i in _data.areaData)
            {
              if(_data.areaData[i][kpi]<1){
                  continue;
              }
              let mode={
                coordinate:_data.areaData[i].coordinate,
                val:_data.areaData[i][kpi],
              }
              obj.data.push(mode);
            }
            this.read(true,obj);
          }
          else{
            this.$message.warning('暂无数据');
            this.$Bus.$emit('Loading',false);
            this.img='';
            this.read(false);
          }
        }
        else{
          console.log('无数据');
          this.img='';
          this.read(false);
          this.$Bus.$emit('Loading',false);
        }
      })
      .catch(err=>{
         console.log(err)
        this.$Bus.$emit('Loading',false);
      })

    },
    //鼠标悬浮
    mouseHover(){
      $('.heatdian').mousemove(function(e){
        $(this).children().css({"top":e.offsetY+20,"left":e.offsetX+20})
      });
    },
    //对比版本号
    getVer(id,v){
      if(localStorage.hasOwnProperty(id))
      {
        let demo=JSON.parse(localStorage.getItem(id));
        if(v==demo.v)
        {
          this.img=demo.img;
        }
        else{
          this.getMap(id);
        }
      }
      else{
        this.getMap(id);
      }
    },
    //更新热力图
    getMap(id){ 
      this.loadingimg=true;
      let url='/sys/thermal/map/get?id='+id;
      this.$api.get(url)
      .then(data=>{
        if(data.data){
          let _data=data.data;
          this.img=_data.thermal_map;
          let demo={
              v:_data.map_version,
              img:_data.thermal_map,
          }
          let strdemo=JSON.stringify(demo);
          localStorage.setItem(_data.id,strdemo);
        }
        else{
          this.img='';
        }
        this.$nextTick(()=>{
          this.loadingimg=false;
        })
      })
      .catch(err=>{
         console.log(err);
      })
    },
    //数据更新 热力点更新
    read(none=true,dataV={}) {
      let points = [];      //鼠标悬浮效果数组
      let heatPoint=[];     //热力图数组
      $('.heatmap-canvas').remove();
      if(!none || !dataV.data.length)
      {
        this.dian.data=[];
        this.dian.max=0;
        this.$Bus.$emit('Loading',false);
        return 
      } 
      for(let i in dataV.data)
      {
        let demo=JSON.parse(dataV.data[i].coordinate);

        if(dataV.data[i].val==null)
        {
          continue;
        }
        let demoMax= this.getmax(demo);
        let sjs=Math.floor(Math.random() * 10) + 1;
        for(let j in demo){
          let xiaoshu=demo[j].value==demoMax?(sjs>4?0.01:-0.01):0;
          let mode={
            x:parseInt(demo[j].x)+5,
            y:parseInt(demo[j].y)+5,
            value:this.Format2(parseFloat((dataV.data[i].val*parseFloat(demo[j].value)).toFixed(2))+xiaoshu),
          }
          let mode2={
            x:parseInt(demo[j].x)+5,
            y:parseInt(demo[j].y)+5,
            areaName:demo[j].areaName,
            value: this.Format2(parseFloat((dataV.data[i].val*parseFloat(demo[j].value)).toFixed(2))+xiaoshu),
            ismax:xiaoshu==0?false:true
          }
          heatPoint.push(mode);
          points.push(mode2);
        }
      }
      let max=this.getmax(points);
      
      if(!heatPoint.length){
        this.dian.data=[];
        this.dian.max=0;
        this.$Bus.$emit('Loading',false);
        return 
      }
      this.dian.data=points;
      this.dian.max=max;
      this.dian.radius=dataV.radius;
      let heatMax=dataV.top_peak>-1?dataV.top_peak:max;
      heatmap = Heatmap.create({
        container: document.getElementById("heatmapid"),
        radius: dataV.radius,
        maxOpacity: 0.6,
        minOpacity: 0,
        blur: 0.75
      });
      let data = {
        max: heatMax,
        data:heatPoint
      };
      heatmap.setData(data);
      this.$nextTick(()=>{
        this.mouseHover();
      })
       this.$Bus.$emit('Loading',false);
    },
    //得到每一轮的最大值
    getmax(arr){
     let valarr=arr.map((x)=>{
       return parseFloat(x.value).toFixed(2);
     })
     
     let max=valarr.reduce((a,b)=>{
       return parseFloat(b)>parseFloat(a)?parseFloat(b):parseFloat(a);
     })
     return max;
    },
    //无案场或无楼层等
    none(){
      this.img='';
      this.read(false);
    },
   
    Format2(val){
      if(val == "" || val == null){
        return "0.00";
      }
      var value=Math.round(parseFloat(val)*100)/100;
      var xsd=value.toString().split(".");
      if(xsd.length == 1){
        value=value.toString()+".00";
        return value;
      }
      if(xsd.length>1){
        if(xsd[1].length<2){
          value=value.toString()+"0";
        }
        return value;
      }
    }
  }
};
</script>

